<template>
  <el-row justify="space-between" :gutter="20">
    <div style="margin:5px 10px;width:100%;box-shadow: 2px 2px 2px #c4c3c3;background-color: #eeeeee;height: 40px;align-items: center;display: flex;align-content: center">
      <div style="font-size: 20px;font-weight: bold;margin: 5px;display: inline-flex;align-items: center">
        <svg class="icon" style="margin-right: 10px;width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1503"><path d="M384 16.128v133.7216C234.8544 202.5664 128 344.8064 128 512c0 212.0768 171.9232 384 384 384 167.1936 0 309.44-106.8544 362.1504-256h133.7216c-56.8384 220.832-257.2992 384-495.872 384-282.7712 0-512-229.2288-512-512C0 273.4272 163.168 72.9664 384 16.128zM512 0c282.7712 0 512 229.2288 512 512H512V0z" fill="#4A4A4A" p-id="1504"></path></svg>
        Cell marker variation prediction
      </div>
    </div>
    <el-col :span="12">

      <el-form
          :model="form"
          label-width="auto"
          :label-position="'top'"
          style="max-width: 600px;font-weight: bolder;font-size: 18px;margin-top: 20px">
        <el-form-item label="SNV input">
          <div style="position: absolute;top:-30px;left:140px">
            <el-tooltip
                class="box-item"
                effect="light"
                :content="'<p style=\'width: 400px;\'>NNotes*: If the SNV site is an SNP, please enter the dbSNP format ID; otherwise, please input the chromosomal position of the SNV, e.g., chr1:793879.</p>'"
                raw-content
                placement="top"
            >
              <el-icon style="color: #107fe7;font-size: 20px"><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div style="display: flex;justify-content: space-between;max-width: 600px;">
            <div style="margin-bottom: 10px;max-width: 600px;">
<!--              <div style="display: flex;justify-content: space-between;">-->
<!--                <div style="font-size: 14px;color: gray">Data type</div>-->
<!--              </div>-->
              <el-input
                  v-model="form.SNV_input.data"
                  style="width: 400px;height: 170px"
                  :rows="8"
                  type="textarea"
                  placeholder="Input snv in dbSNP or chromosomal position:
chr1:22953759
chr1:22954107
chr10:100626277
chr10:100629827
rs10515238
rs10515706
rs145070604
rs2089917
rs2089925"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="Tissue">
          <el-select v-model="form.tissue" placeholder="Select" style="width: 100%">
            <el-option
                v-for="item in tissueOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
<!--        <el-form-item label="Health status">-->
<!--          <el-checkbox-group v-model="form.health_status">-->
<!--            <el-checkbox label="Cancer" value="Cancer" />-->
<!--            <el-checkbox label="Normal" value="Normal" />-->
<!--          </el-checkbox-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="Cell marker gene source">-->
<!--          <el-checkbox-group v-model="form.Single_cell">-->
<!--            <el-checkbox label="Literature curation" value="Literature_curation" />-->
<!--            <el-checkbox label="Single-cell sequencing prediction" value="Single_cell_sequencing_prediction" />-->
<!--          </el-checkbox-group>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="success" @click="onSubmit">Submit</el-button>
          <el-button type="danger" @click="ReSet">Reset</el-button>
          <el-button type="primary" @click="Example">Example</el-button>
        </el-form-item>
      </el-form>
      <div style="">
        <h2 style="">Introduction</h2>
<!--        <h3 style="color: red">Distal regulation:</h3>-->
        <p style="text-align: justify;line-height: 20px">
          Users can input SNVs of interest to predict associated cell types with ASM-related genes.
        </p>
<!--        <h3 style="color: red">SNV input:</h3>-->
        <p style="text-align: justify;line-height: 25px">
          <label style="font-weight: bold">SNV input:</label> Users can input SNVs of interest in one of two standardized formats: a reference SNP ID from dbSNP (e.g., rs1883832) or a chromosomal position (e.g., chr1:1548485) if the SNV is not recorded in dbSNP.
        </p>
<!--        <h3 style="color: red">ASM tissue: </h3>-->
        <p style="text-align: justify;line-height: 25px">
          <label style="font-weight: bold">ASM tissue:</label>Users can select a tissue of interest to filter input SNVs by ASM index SNVs.
        </p>
      </div>

    </el-col>
    <!--    <el-divider direction="vertical" border-style="color: #c4c3c3;font-size: 1px;height:100%"/>-->
    <el-col :span="12">
<!--      <div style="box-shadow: 2px 2px 2px #c4c3c3;background-color: #eeeeee;margin: 5px 0;height: 40px;align-items: center;display: flex;align-content: center">-->
<!--        <div style="font-size: 20px;font-weight: bold;margin: 5px">Schematic diagram of the function</div>-->
<!--      </div>-->
      <div style="text-align: center">
        <img src="../../assets/analysis/analysis3.png" height="611" width="551"/>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "",
  setup(){
    const router = useRouter()
    const form = reactive({
      SNV_input : {
        data: '',
        dataType: {value: 'dbsnpID',label: 'dbsnp ID'}
      },
      tissue: 'ALL',
      health_status:[],
      Single_cell: [],
    })

    const data = reactive({
      tissueOptions:[
        {name:'ALL',value:'ALL'},
        {name:'Bladder',value:'Bladder'},
        {name:'Blood',value:'Blood'},
        {name:'Bone marrow',value:'Bone marrow'},
        {name:'Brain',value:'Brain'},
        {name:'Breast',value:'Breast'},
        {name:'Breast  cancer pdx model',value:'Breast  cancer pdx model'},
        {name:'Cartilage',value:'Cartilage'},
        {name:'Cervix',value:'Cervix'},
        {name:'Esophagus',value:'Esophagus'},
        {name:'Gastric',value:'Gastric'},
        {name:'Intestine',value:'Intestine'},
        {name:'Kidney',value:'Kidney'},
        {name:'Liver',value:'Liver'},
        {name:'Lung',value:'Lung'},
        {name:'Lymph  node',value:'Lymph  node'},
        {name:'Nasopharynx',value:'Nasopharynx'},
        {name:'Nipple  aspirate fluid',value:'Nipple  aspirate fluid'},
        {name:'Oral  ',value:'Oral  '},
        {name:'Ovary',value:'Ovary'},
        {name:'Pancreas',value:'Pancreas'},
        {name:'PDX model colorectal cancer ',value:'PDX model colorectal cancer '},
        {name:'PDX of prostate cancer',value:'PDX of prostate cancer'},
        {name:'Peritoneum',value:'Peritoneum'},
        {name:'Plasma',value:'Plasma'},
        {name:'Prostate',value:'Prostate'},
        {name:'Retina',value:'Retina'},
        {name:'Retinal organoids',value:'Retinal organoids'},
        {name:'Skin',value:'Skin'},
        {name:'Thyroid gland',value:'Thyroid gland'},
        {name:'Xenograft cells of acute lymphoblastic leukemia',value:'Xenograft cells of acute lymphoblastic leukemia'}
      ],
      dataType: [
        {value: 'dbsnpID',label: 'dbsnp ID'}
      ]
    })

    const onSubmit = () => {
      var formJson = JSON.stringify(form)
      router.push({
        path:"/Prediction_of_cell_marker_variations/detail",
        query:{
          form: formJson
        }
      })
    }
    const Example = () => {
      form.SNV_input.data = 'chr1:22953759\n'+
      'chr1:22954107\n'+
      'chr10:100626277\n'+
      'chr10:100629827\n'+
      'rs10515238\n'+
      'rs10515706\n'+
      'rs145070604\n'+
      'rs2089917\n'+
      'rs2089925'
      form.tissue = 'ALL'
    }
    const ReSet = () => {
      form.SNV_input.data = ''
      form.tissue = ''
    }
    return {
      ...toRefs(data),
      form,
      onSubmit,
      Example,
      ReSet
    }
  }
}
</script>

<style scoped>
.text{
  color: gray;
  text-align: justify;
  line-height: 25px
}
::v-deep .el-form-item__label{
  font-size: unset;
}
::v-deep .el-form-item__label{
  color: #000000;
}
</style>
